<template>
  <div class="operationPageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="10">
            <el-col :span="12">
              <div class="searchWrap">
                <span class="searchFont">企业选择:</span>
                <span class="searchInputFont">
                 <el-radio-group v-model="enterpriseNo" size="mini" @change="searchRowsInfo()">
                    <el-radio-button v-for="item in $store.state.companyInfos" :label="item.enterpriseNo" :key="item.enterpriseNo">{{item.enterpriseName}}
                      </el-radio-button>
                  </el-radio-group>
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="tableContainer">
        <div class="tableInner" ref="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            border
            :span-method="objectSpanMethod"
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
           <!-- <el-table-column
              label="企业名称"
              prop="enterpriseName"
              show-overflow-tooltip
            >
            </el-table-column>-->
            <el-table-column
              label="数据类别"
              prop="msgType"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.msgType == 'MSG_ORDER' ? '订单信息' : scope.row.msgType == 'MSG_ORDER_TRACK' ? '订单轨迹上报' : scope.row.msgType == 'MSG_BICYCLE_SITE' ? '车辆位置上报' : ""}}
              </template>
            </el-table-column>
            <el-table-column
              label="完整字段"
              prop="name"
            >
            </el-table-column>
            <el-table-column
              label="正常字段"
              prop="okName"
            >
            </el-table-column>
            <el-table-column
              label="非正常字段"
              prop="noName"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span style="color: red;" v-show="!scope.row.okName">{{scope.row.name}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [],
    data(){
      return {
        rows: [],
        count: 0,
        spanArr: [],
        tableHeight: 400,
        enterpriseNo:"075501",
      }
    },
    components: {},
    created(){
      this.searchRowsInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".operationPageWrap").clientHeight - 120
      })
    },

    methods: {
      //获取所有信息
      searchRowsInfo(key){
        if (key) {
          this.searchInfo.page = 1;
        }
        this.axios.post(process.env.API_HOST + `/data/getFullDataGrid`, {})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              let arr=[]
              result.result.forEach(item=>{
                if(item.enterpriseNo==this.enterpriseNo){
                  item.monitorList.forEach(item1=>{

                    for(var i in item1.referenceMap){
                      if(item1.metaData){
//                        console.log(item1.metaData)
                        let obj={
                          enterpriseName:item.enterpriseName,
                          msgType:item1.msgType,
                          name:item1.referenceMap[i],
                          okName:false
                        }
                        for(var j in item1.metaData){

                          if(j=="trackList"&&i==j){
                            let k=0
                            for(var n in item1.metaData.trackList[0]){
                              if(n=="gnssTime"||n=="lng"||n=="lat"){
                                k++
                              }
                            }
                            if(k==3){
//
                              obj={
                                enterpriseName:item.enterpriseName,
                                msgType:item1.msgType,
                                name:item1.referenceMap[i],
                                okName:item1.referenceMap[i]
                              }
                            }

                          }else if(i==j){
                            obj={
                              enterpriseName:item.enterpriseName,
                              msgType:item1.msgType,
                              name:item1.referenceMap[i],
                              okName:item1.referenceMap[i]
                            }
                          }
                        }
                        arr.push(obj)

                      }else {
                        arr.push({
                          enterpriseName:item.enterpriseName,
                          msgType:item1.msgType,
                          name:item1.referenceMap[i],
                          okName:item1.referenceMap[i]
                        })
                      }

                    }
                  })
                }
              })
              this.rows=arr
              this.spanArr=this.getSpanArr(arr,"msgType")
            }
          })
      },

      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }/*else if(columnIndex === 1){
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }*/
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .operationPageWrap
    page()
    background-color #EFEEF3
    .el-radio-button
      margin-right 10px
    .el-radio-button__inner
      border-radius 10px !important
      padding 5px 15px
      margin-right 10px
      border: 1px solid #dcdfe6 !important
    .is-checked
      .el-radio-button__inner
        background-color: #3975FE
        border-radius 10px !important
        border-color #3975FE

</style>
